```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git冲突处理全指南 | 技术小馆</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.8;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .code-block {
            background-color: #2d2d2d;
            color: #f8f8f2;
            border-radius: 0.5rem;
            overflow-x: auto;
        }
        .conflict-marker {
            background-color: rgba(255, 235, 59, 0.2);
            border-left: 3px solid #ff9800;
            padding-left: 1rem;
        }
        .tooltip:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
        .animate-fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl text-center animate-fade-in">
            <div class="flex justify-center mb-6">
                <span class="bg-white bg-opacity-20 px-4 py-1 rounded-full text-sm font-medium">Git 最佳实践</span>
            </div>
            <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">在Git中如何处理冲突</h1>
            <p class="text-xl md:text-2xl opacity-90 max-w-3xl mx-auto mb-10">
                掌握冲突处理的艺术，提升团队协作效率
            </p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="#conflict-types" class="bg-white text-purple-700 px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition-all duration-300 transform hover:-translate-y-1">
                    <i class="fas fa-fire mr-2"></i>冲突类型
                </a>
                <a href="#resolution-steps" class="bg-white bg-opacity-20 px-6 py-3 rounded-lg font-medium hover:bg-opacity-30 transition-all duration-300 transform hover:-translate-y-1">
                    <i class="fas fa-steps mr-2"></i>解决步骤
                </a>
                <a href="#strategies" class="bg-white bg-opacity-20 px-6 py-3 rounded-lg font-medium hover:bg-opacity-30 transition-all duration-300 transform hover:-translate-y-1">
                    <i class="fas fa-chess-board mr-2"></i>解决策略
                </a>
            </div>
        </div>
    </section>

    <!-- Introduction Section -->
    <section class="py-16 px-4 md:px-0 bg-white">
        <div class="container mx-auto max-w-5xl">
            <div class="flex flex-col md:flex-row items-center gap-10">
                <div class="md:w-1/2">
                    <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1724985633622-5aa01d6c-630f-4c59-adcb-0297424e9c21.png" 
                         alt="Git冲突示意图" 
                         class="rounded-xl shadow-lg w-full h-auto">
                </div>
                <div class="md:w-1/2">
                    <h2 class="text-3xl font-bold mb-6 text-gray-800">为什么Git冲突不可避免？</h2>
                    <p class="text-gray-600 mb-4">
                        在现代软件开发中，版本控制系统是不可或缺的工具，而Git作为其中的佼佼者，因其强大的分布式特性和灵活的分支管理能力，被广泛应用于各类项目。
                    </p>
                    <p class="text-gray-600 mb-6">
                        然而，在多人协作开发的环境中，我们不可避免地会遇到代码冲突的情况。代码冲突指的是当两个或多个开发人员在不同的分支上修改了同一个文件的同一部分，并试图将这些更改合并到同一个分支时，Git无法自动决定哪些更改应该保留，这就导致了冲突。
                    </p>
                    <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded">
                        <p class="text-blue-800 font-medium">
                            <i class="fas fa-lightbulb text-blue-500 mr-2"></i>
                            处理冲突是每个开发人员都必须掌握的重要技能，因为不当的冲突处理可能会导致代码丢失、功能异常，甚至引发更大的项目问题。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Git Basics Section -->
    <section class="py-16 px-4 md:px-0 bg-gray-50">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">Git的核心概念</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">
                    了解Git的基本原理是有效解决冲突的基础，下面我们介绍Git的核心工作机制。
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition-all duration-300">
                    <div class="text-purple-600 mb-4">
                        <i class="fas fa-code-branch text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">分布式版本控制</h3>
                    <p class="text-gray-600">
                        与集中式版本控制系统不同，Git是一个分布式版本控制系统。每个开发者的工作目录不仅是项目的最新版本，还包含了整个项目的历史。所有的提交记录都保存在本地，使得离线工作变得非常方便。
                    </p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition-all duration-300">
                    <div class="text-blue-600 mb-4">
                        <i class="fas fa-camera text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">快照而非差异存储</h3>
                    <p class="text-gray-600">
                        Git以快照的方式存储项目的历史，而不是传统的版本控制系统的差异存储。每次提交操作，Git都会保存一个项目文件的快照，只有在文件有变动时，Git才会保存新的文件快照。
                    </p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition-all duration-300">
                    <div class="text-green-600 mb-4">
                        <i class="fas fa-fingerprint text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">数据完整性</h3>
                    <p class="text-gray-600">
                        Git使用SHA-1哈希值来唯一标识每一个文件、提交、分支等对象。所有的数据对象都通过哈希值进行管理，从而确保了数据的完整性和防篡改能力。
                    </p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition-all duration-300">
                    <div class="text-orange-600 mb-4">
                        <i class="fas fa-network-wired text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">分支和合并</h3>
                    <p class="text-gray-600">
                        Git的分支功能非常轻量级且强大，使得开发者可以轻松地创建、合并和删除分支。分支的创建和切换在Git中是非常快速的，因为Git只是移动了指向不同提交的指针。
                    </p>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="md:flex">
                    <div class="md:w-1/2 p-8">
                        <h3 class="text-2xl font-bold mb-4 text-gray-800">Git内部工作机制</h3>
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <span class="bg-purple-100 text-purple-600 p-2 rounded-full mr-3">
                                    <i class="fas fa-database text-sm"></i>
                                </span>
                                <div>
                                    <h4 class="font-medium text-gray-800">对象数据库</h4>
                                    <p class="text-gray-600 text-sm">由Blob、Tree、Commit和Tag四种对象类型组成，通过哈希值相互关联。</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <span class="bg-blue-100 text-blue-600 p-2 rounded-full mr-3">
                                    <i class="fas fa-layer-group text-sm"></i>
                                </span>
                                <div>
                                    <h4 class="font-medium text-gray-800">索引（Index）</h4>
                                    <p class="text-gray-600 text-sm">临时区域，用于保存文件变更的暂存状态。</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <span class="bg-green-100 text-green-600 p-2 rounded-full mr-3">
                                    <i class="fas fa-boxes text-sm"></i>
                                </span>
                                <div>
                                    <h4 class="font-medium text-gray-800">仓库（Repository）</h4>
                                    <p class="text-gray-600 text-sm">核心存储，包含对象数据库、索引和提交历史。</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="md:w-1/2">
                        <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1724985831620-b4012b66-eeba-4ad7-8cb1-abb3a4a931c9.png" 
                             alt="Git内部工作机制" 
                             class="w-full h-full object-cover">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Conflict Causes Section -->
    <section id="conflict-causes" class="py-16 px-4 md:px-0 bg-white">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">Git冲突的产生原因</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">
                    理解冲突的根源有助于我们更有效地预防和解决冲突。
                </p>
            </div>
            
            <div class="mb-12">
                <div class="flex flex-col md:flex-row items-center gap-8 mb-12">
                    <div class="md:w-1/2">
                        <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1724986044084-ba9b957b-183f-4b64-88e5-3fd4d9d726f7.png" 
                             alt="代码冲突示意图" 
                             class="rounded-xl shadow-lg w-full h-auto">
                    </div>
                    <div class="md:w-1/2">
                        <h3 class="text-2xl font-bold mb-4 text-gray-800">什么是代码冲突？</h3>
                        <p class="text-gray-600 mb-4">
                            代码冲突是指在版本控制系统中，当多个开发者同时对同一文件的相同部分进行修改时，在合并这些修改时出现的不一致问题。代码冲突的发生是因为版本控制系统无法自动确定哪一个修改是正确的，或者两个修改之间没有明确的优先级。
                        </p>
                        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded">
                            <p class="text-yellow-800">
                                <i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i>
                                在分布式版本控制系统中，代码冲突是一个常见的现象，因为这些系统允许开发者在各自的分支上并行工作。
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="grid md:grid-cols-2 gap-8">
                    <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
                        <h3 class="text-xl font-bold mb-3 text-gray-800 flex items-center">
                            <span class="bg-red-100 text-red-600 p-2 rounded-full mr-3">
                                <i class="fas fa-code text-sm"></i>
                            </span>
                            并行修改同一代码段
                        </h3>
                        <p class="text-gray-600">
                            当多个开发者在不同的分支上同时修改了同一个文件的同一部分时，就会产生冲突。Git无法确定哪个修改是正确的或优先级更高。
                        </p>
                    </div>
                    
                    <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
                        <h3 class="text-xl font-bold mb-3 text-gray-800 flex items-center">
                            <span class="bg-purple-100 text-purple-600 p-2 rounded-full mr-3">
                                <i class="fas fa-file-export text-sm"></i>
                            </span>
                            文件重命名或删除冲突
                        </h3>
                        <p class="text-gray-600">
                            开发者A在其分支上重命名了一个文件，而开发者B在其分支上删除了同一个文件。当合并这两个分支时，Git无法决定应该保留重命名后的文件还是删除该文件。
                        </p>
                    </div>
                    
                    <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
                        <h3 class="text-xl font-bold mb-3 text-gray-800 flex items-center">
                            <span class="bg-blue-100 text-blue-600 p-2 rounded-full mr-3">
                                <i class="fas fa-project-diagram text-sm"></i>
                            </span>
                            不同的分支策略和变更频率
                        </h3>
                        <p class="text-gray-600">
                            如果团队成员在同一时间内频繁地向公共分支提交变更，但没有及时地拉取和合并最新的代码，就会增加冲突的风险。
                        </p>
                    </div>
                    
                    <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
                        <h3 class="text-xl font-bold mb-3 text-gray-800 flex items-center">
                            <span class="bg-green-100 text-green-600 p-2 rounded-full mr-3">
                                <i class="fas fa-sync-alt text-sm"></i>
                            </span>
                            未同步远程仓库的更改
                        </h3>
                        <p class="text-gray-600">
                            在远程仓库已经有新的变更提交而本地仓库没有同步的情况下，本地的进一步提交可能会导致冲突。
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="bg-indigo-50 rounded-xl p-8">
                <h3 class="text-2xl font-bold mb-4 text-indigo-800">冲突的负面影响</h3>
                <div class="grid md:grid-cols-3 gap-6">
                    <div class="bg-white p-5 rounded-lg shadow-sm">
                        <div class="text-red-500 mb-3">
                            <i class="fas fa-tachometer-alt text-2xl"></i>
                        </div>
                        <h4 class="font-bold text-gray-800 mb-2">降低开发效率</h4>
                        <p class="text-gray-600 text-sm">解决冲突需要花费额外的时间和精力，特别是在冲突较复杂的情况下。</p>
                    </div>
                    <div class="bg-white p-5 rounded-lg shadow-sm">
                        <div class="text-purple-500 mb-3">
                            <i class="fas fa-comments text-2xl"></i>
                        </div>
                        <h4 class="font-bold text-gray-800 mb-2">增加沟通成本</h4>
                        <p class="text-gray-600 text-sm">开发者之间需要频繁沟通，了解彼此的代码变更和意图。</p>
                    </div>
                    <div class="bg-white p-5 rounded-lg shadow-sm">
                        <div class="text-orange-500 mb-3">
                            <i class="fas fa-bug text-2xl"></i>
                        </div>
                        <h4 class="font-bold text-gray-800 mb-2">引入潜在错误</h4>
                        <p class="text-gray-600 text-sm">如果冲突解决不当，可能会引入新的错误或引发新的冲突。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Conflict Types Section -->
    <section id="conflict-types" class="py-16 px-4 md:px-0 bg-gray-50">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">Git中冲突的类型</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">
                    了解不同类型的冲突有助于我们采取更有针对性的解决策略。
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                        <span class="bg-red-100 text-red-600 p-2 rounded-full mr-3">
                            <i class="fas fa-file-alt"></i>
                        </span>
                        文件级别冲突
                    </h3>
                    <ul class="space-y-3 text-gray-600">
                        <li class="flex items-start">
                            <span class="text-red-500 mr-2">•</span>
                            <div>
                                <strong>文件删除-修改冲突</strong>：一个分支删除了文件，而另一个分支对同一个文件做了修改
                            </div>
                        </li>
                        <li class="flex items-start">
                            <span class="text-red-500 mr-2">•</span>
                            <div>
                                <strong>文件重命名冲突</strong>：两个分支同时对一个文件进行了重命名操作
                            </div>
                        </li>
                    </ul>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                        <span class="bg-blue-100 text-blue-600 p-2 rounded-full mr-3">
                            <i class="fas fa-align-left"></i>
                        </span>
                        行级别冲突
                    </h3>
                    <ul class="space-y-3 text-gray-600">
                        <li class="flex items-start">
                            <span class="text-blue-500 mr-2">•</span>
                            <div>
                                <strong>相同行冲突</strong>：两个分支修改了同一个文件的同一行代码
                            </div>
                        </li>
                        <li class="flex items-start">
                            <span class="text-blue-500 mr-2">•</span>
                            <div>
                                <strong>相邻行冲突</strong>：两个分支在文件的相邻行中做了不同的修改
                            </div>
                        </li>
                    </ul>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                        <span class="bg-purple-100 text-purple-600 p-2 rounded-full mr-3">
                            <i class="fas fa-cogs"></i>
                        </span>
                        操作类型冲突
                    </h3>
                    <ul class="space-y-3 text-gray-600">
                        <li class="flex items-start">
                            <span class="text-purple-500 mr-2">•</span>
                            <div>
                                <strong>格式化与修改冲突</strong>：一个分支进行代码格式化，另一个分支进行逻辑修改
                            </div>
                        </li>
                        <li class="flex items-start">
                            <span class="text-purple-500 mr-2">•</span>
                            <div>
                                <strong>逻辑修改冲突</strong>：两个分支对同一个代码块进行了不同的逻辑修改
                            </div>
                        </li>
                    </ul>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                        <span class="bg-green-100 text-green-600 p-2 rounded-full mr-3">
                            <i class="fas fa-project-diagram"></i>
                        </span>
                        合并复杂性冲突
                    </h3>
                    <ul class="space-y-3 text-gray-600">
                        <li class="flex items-start">
                            <span class="text-green-500 mr-2">•</span>
                            <div>
                                <strong>跨文件冲突</strong>：多个文件之间存在逻辑关联性
                            </div>
                        </li>
                        <li class="flex items-start">
                            <span class="text-green-500 mr-2">•</span>
                            <div>
                                <strong>多分支复杂合并冲突</strong>：多个特性分支同时合并到主分支
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="md:flex">
                    <div class="md:w-1/2 p-8">
                        <h3 class="text-2xl font-bold mb-4 text-gray-800">冲突检测机制</h3>
                        <p class="text-gray-600 mb-6">
                            Git通过三方合并算法来检测和标识冲突。当两个分支需要合并时，Git会引入一个公共祖先（merge base），并比较这三者的差异：
                        </p>
                        <div class="space-y-4">
                            <div class="flex items-start">
                                <span class="bg-gray-200 text-gray-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">1</span>
                                <div>
                                    <h4 class="font-medium text-gray-800">找到公共祖先</h4>
                                    <p class="text-gray-600 text-sm">查找当前分支和目标分支的最近公共祖先</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <span class="bg-gray-200 text-gray-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">2</span>
                                <div>
                                    <h4 class="font-medium text-gray-800">计算差异</h4>
                                    <p class="text-gray-600 text-sm">比较公共祖先和当前HEAD、公共祖先和目标HEAD之间的差异</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <span class="bg-gray-200 text-gray-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">3</span>
                                <div>
                                    <h4 class="font-medium text-gray-800">应用差异和检测冲突</h4>
                                    <p class="text-gray-600 text-sm">将差异应用于当前工作目录，检测冲突</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="md:w-1/2 bg-gray-100 flex items-center justify-center p-8">
                        <div class="mermaid">
                            graph TD
                                A[公共祖先] --> B[分支A HEAD]
                                A --> C[分支B HEAD]
                                B --> D[合并结果]
                                C --> D
                                style A fill:#e3f2fd,stroke:#2196f3
                                style B fill:#e8f5e9,stroke:#4caf50
                                style C fill:#fff3e0,stroke:#ff9800
                                style D fill:#f3e5f5,stroke:#9c27b0
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Resolution Steps Section -->
    <section id="resolution-steps" class="py-16 px-4 md:px-0 bg-white">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">Git冲突解决的步骤</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">
                    系统的解决步骤可以帮助我们高效、准确地处理Git冲突。
                </p>
            </div>
            
            <div class="relative">
                <div class="absolute left-4 md:left-1/2 h-full w-1 bg-gray-200 transform -translate-x-1/2"></div>
                
                <div class="space-y-12">
                    <div class="relative flex items-center">
                        <div class="flex-shrink-0 w-8 h-8 rounded-full bg-purple-600 text-white flex items-center justify-center z-10 mr-4">
                            1
                        </div>
                        <div class="flex-1 bg-gray-50 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-bold mb-3 text-gray-800">检测到冲突</h3>
                            <p class="text-gray-600 mb-4">
                                在进行Git操作(如merge、rebase或cherry-pick)时，如果出现冲突，Git会停止操作并显示冲突信息。
                            </p>
                            <div class="code-block p-4 rounded text-sm mb-4">
                                <span class="text-gray-400">$ git merge feature-branch</span><br>
                                <span class="text-red-400">CONFLICT (content): Merge conflict in myfile.txt</span><br>
                                <span class="text-yellow-400">Automatic merge failed; fix conflicts and then commit the result.</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="relative flex items-center">
                        <div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center z-10 mr-4">
                            2
                        </div>
                        <div class="flex-1 bg-gray-50 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-bold mb-3 text-gray-800">确定冲突的文件和位置</h3>
                            <p class="text-gray-600 mb-4">
                                使用<code class="bg-gray-200 px-1 rounded">git status</code>命令查看冲突文件列表。
                            </p>
                            <div class="code-block p-4 rounded text-sm mb-4">
                                <span class="text-gray-400">$ git status</span><br>
                                <span class="text-gray-300">Unmerged paths:</span><br>
                                <span class="text-gray-300">  (use "git add <file>..." to mark resolution)</span><br>
                                <span class="text-yellow-400">        both modified:   src/main/java/com/example/MyClass.java</span>
                            </div>
                            <p class="text-gray-600">
                                直接打开冲突文件查看具体冲突位置，Git会在冲突部分插入标记。
                            </p>
                            <div class="code-block p-4 rounded text-sm mt-4">
                                <div class="conflict-marker mb-2">
                                    <span class="text-red-400"><<<<<<< HEAD</span><br>
                                    <span class="text-gray-300">本地分支的更改</span><br>
                                    <span class="text-red-400">=======</span><br>
                                    <span class="text-gray-300">远程分支的更改</span><br>
                                    <span class="text-red-400">>>>>>>> branch-name</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="relative flex items-center">
                        <div class="flex-shrink-0 w-8 h-8 rounded-full bg-green-600 text-white flex items-center justify-center z-10 mr-4">
                            3
                        </div>
                        <div class="flex-1 bg-gray-50 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-bold mb-3 text-gray-800">分析冲突内容并做出决策</h3>
                            <p class="text-gray-600 mb-4">
                                根据项目需求和业务逻辑决定如何解决冲突：
                            </p>
                            <div class="grid md:grid-cols-3 gap-4">
                                <div class="bg-white p-4 rounded border border-green-200">
                                    <h4 class="font-bold text-green-700 mb-2 flex items-center">
                                        <i class="fas fa-user-check mr-2"></i>保留本地更改
                                    </h4>
                                    <p class="text-gray-600 text-sm">
                                        删除<code class="bg-gray-100 px-1 rounded">=======</code>及其下方的代码，只保留<code class="bg-gray-100 px-1 rounded"><<<<<<< HEAD</code>及其上方的部分
                                    </p>
                                </div>
                                <div class="bg-white p-4 rounded border border-blue-200">
                                    <h4 class="font-bold text-blue-700 mb-2 flex items-center">
                                        <i class="fas fa-cloud-download-alt mr-2"></i>保留远程更改
                                    </h4>
                                    <p class="text-gray-600 text-sm">
                                        删除<code class="bg-gray-100 px-1 rounded">=======</code>及其上方的代码，只保留<code class="bg-gray-100 px-1 rounded">>>>>>>> branch-name</code>及其下方的部分
                                    </p>
                                </div>
                                <div class="bg-white p-4 rounded border border-purple-200">
                                    <h4 class="font-bold text-purple-700 mb-2 flex items-center">
                                        <i class="fas fa-merge mr-2"></i>手动合并更改
                                    </h4>
                                    <p class="text-gray-600 text-sm">
                                        手动编辑代码，合并两部分的内容，确保逻辑的正确性和代码的一致性
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="relative flex items-center">
                        <div class="flex-shrink-0 w-8 h-8 rounded-full bg-yellow-600 text-white flex items-center justify-center z-10 mr-4">
                            4
                        </div>
                        <div class="flex-1 bg-gray-50 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-bold mb-3 text-gray-800">标记冲突文件为已解决</h3>
                            <p class="text-gray-600 mb-4">
                                在完成冲突文件的修改后，使用<code class="bg-gray-200 px-1 rounded">git add</code>命令将已解决的文件标记为暂存状态。
                            </p>
                            <div class="code-block p-4 rounded text-sm mb-4">
                                <span class="text-gray-400">$ git add src/main/java/com/example/MyClass.java</span>
                            </div>
                            <p class="text-gray-600">
                                使用<code class="bg-gray-200 px-1 rounded">git status</code>确认所有冲突文件都已被处理。
                            </p>
                        </div>
                    </div>
                    
                    <div class="relative flex items-center">
                        <div class="flex-shrink-0 w-8 h-8 rounded-full bg-red-600 text-white flex items-center justify-center z-10 mr-4">
                            5
                        </div>
                        <div class="flex-1 bg-gray-50 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-bold mb-3 text-gray-800">完成合并或重构操作</h3>
                            <p class="text-gray-600 mb-4">
                                根据具体的Git操作类型，执行以下命令之一：
                            </p>
                            <div class="grid md:grid-cols-2 gap-4">
                                <div class="bg-white p-4 rounded border border-gray-200">
                                    <h4 class="font-bold text-gray-800 mb-2">合并操作</h4>
                                    <div class="code-block p-3 rounded text-sm">
                                        <span class="text-gray-400">git commit -m "Resolved merge conflicts"</span>
                                    </div>
                                </div>
                                <div class="bg-white p-4 rounded border border-gray-200">
                                    <h4 class="font-bold text-gray-800 mb-2">变基操作</h4>
                                    <div class="code-block p-3 rounded text-sm">
                                        <span class="text-gray-400">git rebase --continue</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="relative flex items-center">
                        <div class="flex-shrink-0 w-8 h-8 rounded-full bg-indigo-600 text-white flex items-center justify-center z-10 mr-4">
                            6
                        </div>
                        <div class="flex-1 bg-gray-50 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-bold mb-3 text-gray-800">验证代码和测试</h3>
                            <p class="text-gray-600 mb-4">
                                完成冲突解决并提交代码后，务必进行完整的代码检查和测试：
                            </p>
                            <ul class="space-y-2 text-gray-600">
                                <li class="flex items-start">
                                    <span class="text-indigo-500 mr-2">•</span>
                                    <div>运行所有单元测试，确保解决冲突的代码不会破坏现有功能</div>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-indigo-500 mr-2">•</span>
                                    <div>手动测试关键功能，特别是冲突发生在关键业务逻辑部分</div>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-indigo-500 mr-2">•</span>
                                    <div>在大型团队中，进行代码审查(Code Review)，确保冲突解决的质量</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="relative flex items-center">
                        <div class="flex-shrink-0 w-8 h-8 rounded-full bg-pink-600 text-white flex items-center justify-center z-10 mr-4">
                            7
                        </div>
                        <div class="flex-1 bg-gray-50 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-bold mb-3 text-gray-800">提交和推送更改</h3>
                            <p class="text-gray-600 mb-4">
                                在本地验证和测试代码无误后，将更改推送到远程仓库：
                            </p>
                            <div class="code-block p-4 rounded text-sm">
                                <span class="text-gray-400">$ git push origin feature-branch</span>
                            </div>
                            <p class="text-gray-600 mt-4">
                                确保所有团队成员都能同步最新的代码版本，并基于最新的代码库继续开发工作。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Strategies Section -->
    <section id="strategies" class="py-16 px-4 md:px-0 bg-gray-50">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">Git冲突解决策略</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">
                    根据不同的场景选择合适的冲突解决策略，可以提高团队的工作效率。
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition-all duration-300">
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-100 text-blue-600 p-3 rounded-full mr-4">
                            <i class="fas fa-home text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800">优先保留本地更改</h3>
                    </div>
                    <div class="pl-16">
                        <h4 class="font-medium text-gray-700 mb-2">适用场景</h4>
                        <ul class="text-gray-600 space-y-2 mb-4">
                            <li class="flex items-start">
                                <span class="text-blue-500 mr-2">•</span>
                                <div>本地分支所做的更改为最新的业务需求</div>
                            </li>
                            <li class="flex items-start">
                                <span class="text-blue-500 mr-2">•</span>
                                <div>本地更改已经过充分的测试和验证</div>
                            </li>
                        </ul>
                        <div class="code-block p-3 rounded text-sm mb-4">
                            <span class="text-gray-400">git merge -X ours &lt;branch&gt;</span>
                        </div>
                        <div class="bg-blue-50 border-l-4 border-blue-500 p-3 rounded">
                            <p class="text-blue-800 text-sm">
                                <i class="fas fa-info-circle mr-1"></i>
                                可能丢失重要的远程更改，需谨慎使用
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition-all duration-300">
                    <div class="flex items-center mb-4">
                        <div class="bg-purple-100 text-purple-600 p-3 rounded-full mr-4">
                            <i class="fas fa-cloud text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800">优先保留远程更改</h3>
                    </div>
                    <div class="pl-16">
                        <h4 class="font-medium text-gray-700 mb-2">适用场景</h4>
                        <ul class="text-gray-600 space-y-2 mb-4">
                            <li class="flex items-start">
                                <span class="text-purple-500 mr-2">•</span>
                                <div>远程分支的更改较新且已部署到生产环境</div>
                            </li>
                            <li class="flex items-start">
                                <span class="text-purple-500 mr-2">•</span>
                                <div>本地更改较少且对项目整体影响不大</div>
                            </li>
                        </ul>
                        <div class="code-block p-3 rounded text-sm mb-4">
                            <span class="text-gray-400">git merge -X theirs &lt;branch&gt;</span>
                        </div>
                        <div class="bg-purple-50 border-l-4 border-purple-500 p-3 rounded">
                            <p class="text-purple-800 text-sm">
                                <i class="fas fa-info-circle mr-1"></i>
                                本地更改会被覆盖，需提前做好备份
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition-all duration-300">
                    <div class="flex items-center mb-4">
                        <div class="bg-green-100 text-green-600 p-3 rounded-full mr-4">
                            <i class="fas fa-hands-helping text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800">手动合并冲突</h3>
                    </div>
                    <div class="pl-16">
                        <h4 class="font-medium text-gray-700 mb-2">适用场景</h4>
                        <ul class="text-gray-600 space-y-2 mb-4">
                            <li class="flex items-start">
                                <span class="text-green-500 mr-2">•</span>
                                <div>两边的更改都有必要保留</div>
                            </li>
                            <li class="flex items-start">
                                <span class="text-green-500 mr-2">•</span>
                                <div>发生复杂冲突时</div>
                            </li>
                        </ul>
                        <div class="bg-green-50 border-l-4 border-green-500 p-3 rounded mb-4">
                            <p class="text-green-800 text-sm">
                                <i class="fas fa-lightbulb mr-1"></i>
                                需要理解双方代码意图，结合业务逻辑手动合并
                            </p>
                        </div>
                        <div class="bg-yellow-50 border-l-4 border-yellow-500 p-3 rounded">
                            <p class="text-yellow-800 text-sm">
                                <i class="fas fa-exclamation-triangle mr-1"></i>
                                合并过程中容易出错，需对代码有深入了解
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition-all duration-300">
                    <div class="flex items-center mb-4">
                        <div class="bg-orange-100 text-orange-600 p-3 rounded-full mr-4">
                            <i class="fas fa-sitemap text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800">策略性分支管理</h3>
                    </div>
                    <div class="pl-16">
                        <h4 class="font-medium text-gray-700 mb-2">适用场景</h4>
                        <ul class="text-gray-600 space-y-2 mb-4">
                            <li class="flex items-start">
                                <span class="text-orange-500 mr-2">•</span>
                                <div>大型项目有多个开发人员和功能分支</div>
                            </li>
                            <li class="flex items-start">
                                <span class="text-orange-500 mr-2">•</span>
                                <div>需要频繁进行分支合并</div>
                            </li>
                        </ul>
                        <div class="bg-orange-50 border-l-4 border-orange-500 p-3 rounded">
                            <p class="text-orange-800 text-sm">
                                <i class="fas fa-info-circle mr-1"></i>
                                采用Git Flow、GitHub Flow等分支策略减少冲突
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition-all duration-300">
                    <div class="flex items-center mb-4">
                        <div class="bg-pink-100 text-pink-600 p-3 rounded-full mr-4">
                            <i class="fas fa-tools text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800">借助工具辅助合并</h3>
                    </div>
                    <div class="pl-16">
                        <h4 class="font-medium text-gray-700 mb-2">适用场景</h4>
                        <ul class="text-gray-600 space-y-2 mb-4">
                            <li class="flex items-start">
                                <span class="text-pink-500 mr-2">•</span>
                                <div>需要提高冲突解决效率</div>
                            </li>
                            <li class="flex items-start">
                                <span class="text-pink-500 mr-2">•</span>
                                <div>需要图形化界面辅助解决冲突</div>
                            </li>
                        </ul>
                        <div class="grid grid-cols-3 gap-2 mt-4">
                            <div class="tooltip relative inline-block">
                                <div class="bg-gray-100 p-2 rounded flex justify-center">
                                    <i class="fab fa-gitkraken text-2xl text-purple-600"></i>
                                </div>
                                <span class="tooltip-text invisible opacity-0 bg-black text-white text-xs rounded p-2 absolute z-10 -mt-8 transform -translate-x-1/2 left-1/2 transition-all duration-300">GitKraken</span>
                            </div>
                            <div class="tooltip relative inline-block">
                                <div class="bg-gray-100 p-2 rounded flex justify-center">
                                    <i class="fab fa-git-alt text-2xl text-orange-600"></i>
                                </div>
                                <span class="tooltip-text invisible opacity-0 bg-black text-white text-xs rounded p-2 absolute z-10 -mt-8 transform -translate-x-1/2 left-1/2 transition-all duration-300">SourceTree</span>
                            </div>
                            <div class="tooltip relative inline-block">
                                <div class="bg-gray-100 p-2 rounded flex justify-center">
                                    <i class="fas fa-code-merge text-2xl text-blue-600"></i>
                                </div>
                                <span class="tooltip-text invisible opacity-0 bg-black text-white text-xs rounded p-2 absolute z-10 -mt-8 transform -translate-x-1/2 left-1/2 transition-all duration-300">Beyond Compare</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition-all duration-300">
                    <div class="flex items-center mb-4">
                        <div class="bg-red-100 text-red-600 p-3 rounded-full mr-4">
                            <i class="fas fa-undo text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800">代码回滚与恢复</h3>
                    </div>
                    <div class="pl-16">
                        <h4 class="font-medium text-gray-700 mb-2">适用场景</h4>
                        <ul class="text-gray-600 space-y-2 mb-4">
                            <li class="flex items-start">
                                <span class="text-red-500 mr-2">•</span>
                                <div>发生严重冲突且无法快速解决</div>
                            </li>
                            <li class="flex items-start">
                                <span class="text-red-500 mr-2">•</span>
                                <div>需要恢复到冲突前的状态</div>
                            </li>
                        </ul>
                        <div class="space-y-2">
                            <div class="code-block p-2 rounded text-sm">
                                <span class="text-gray-400">git reset --hard &lt;commit-id&gt;</span>
                            </div>
                            <div class="code-block p-2 rounded text-sm">
                                <span class="text-gray-400">git revert &lt;commit-id&gt;</span>
                            </div>
                        </div>
                        <div class="bg-red-50 border-l-4 border-red-500 p-3 rounded mt-4">
                            <p class="text-red-800 text-sm">
                                <i class="fas fa-exclamation-triangle mr-1"></i>
                                回滚操作可能会丢失未提交的更改，需提前备份
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Prevention Section -->
    <section class="py-16 px-4 md:px-0 bg-white">
        <div class="container mx-auto max-w-5xl">
            <div class="bg-indigo-50 rounded-2xl p-8 md:p-12 shadow-sm">
                <div class="text-center mb-8">
                    <h2 class="text-3xl font-bold text-indigo-800 mb-4">预防Git冲突的最佳实践</h2>
                    <p class="text-indigo-600 max-w-3xl mx-auto">
                        通过良好的开发习惯和团队协作规范，可以有效减少冲突发生的频率和复杂性。
                    </p>
                </div>
                
                <div class="grid md:grid-cols-3 gap-6">
                    <div class="bg-white p-6 rounded-xl shadow-sm">
                        <div class="text-indigo-600 mb-4">
                            <i class="fas fa-sync-alt text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-gray-800 mb-2">频繁拉取更新</h3>
                        <p class="text-gray-600 text-sm">
                            确保每个开发者的本地仓库始终与远程仓库保持同步，尽量减少冲突的可能性。
                        </p>
                    </div>
                    
                    <div class="bg-white p-6 rounded-xl shadow-sm">
                        <div class="text-green-600 mb-4">
                            <i class="fas fa-code-commit text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-gray-800 mb-2">小步提交</h3>
                        <p class="text-gray-600 text-sm">
                            进行小而频繁的提交，这样更容易跟踪和合并变更。
                        </p>
                    </div>
                    
                    <div class="bg-white p-6 rounded-xl shadow-sm">
                        <div class="text-blue-600 mb-4">
                            <i class="fas fa-code-branch text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-gray-800 mb-2">明确分支策略</h3>
                        <p class="text-gray-600 text-sm">
                            制定清晰的分支管理策略，确保每个开发者的工作范围明确。
                        </p>
                    </div>
                    
                    <div class="bg-white p-6 rounded-xl shadow-sm">
                        <div class="text-purple-600 mb-4">
                            <i class="fas fa-search text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-gray-800 mb-2">代码审查</h3>
                        <p class="text-gray-600 text-sm">
                            通过代码审查(Code Review)来识别潜在的冲突和问题。
                        </p>
                    </div>
                    
                    <div class="bg-white p-6 rounded-xl shadow-sm">
                        <div class="text-orange-600 mb-4">
                            <i class="fas fa-robot text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-gray-800 mb-2">自动化测试</h3>
                        <p class="text-gray-600 text-sm">
                            使用自动化测试来检测冲突，尽早发现问题。
                        </p>
                    </div>
                    
                    <div class="bg-white p-6 rounded-xl shadow-sm">
                        <div class="text-pink-600 mb-4">
                            <i class="fas fa-comments text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-gray-800 mb-2">团队沟通</h3>
                        <p class="text-gray-600 text-sm">
                            保持团队成员之间的良好沟通，协调代码修改计划。
                        </p>
                    </div>
                </div>
                
                <div class="mt-10 bg-white rounded-xl p-6 shadow-sm">
                    <div class="flex items-start">
                        <div class="bg-indigo-100 text-indigo-600 p-3 rounded-full mr-4 flex-shrink-0">
                            <i class="fas fa-lightbulb text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-800 mb-2">冲突解决小贴士</h3>
                            <ul class="text-gray-600 space-y-2">
                                <li class="flex items-start">
                                    <span class="text-indigo-500 mr-2">•</span>
                                    <div>在解决冲突前，确保理解冲突双方的代码修改意图</div>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-indigo-500 mr-2">•</span>
                                    <div>解决冲突后，运行完整的测试套件验证修改</div>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-indigo-500 mr-2">•</span>
                                    <div>对于复杂的冲突，不要犹豫寻求团队成员的帮助</div>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-indigo-500 mr-2">•</span>
                                    <div>使用<code class="bg-gray-100 px-1 rounded">git diff</code>命令查看冲突的具体差异</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-12 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center">
                <h3 class="text-xl font-bold text-white mb-2">技术小馆</h3>
                <p class="mb-6">探索技术世界，分享开发经验</p>
                <div class="flex justify-center space-x-4">
                    <a href="http://www.yuque.com/jtostring" class="text-gray-400 hover:text-white transition-colors duration-300">
                        <i class="fas fa-globe text-lg"></i>
                    </a>
                </div>
                <p class="mt-8 text-sm text-gray-500">
                    &copy; 2023 技术小馆. 保留所有权利.
                </p>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 滚动动画
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
        
        // Tooltip显示
        document.querySelectorAll('.tooltip').forEach(el => {
            el.addEventListener('mouseenter', () => {
                const tooltip = el.querySelector('.tooltip-text');
                tooltip.classList.remove('invisible', 'opacity-0');
            });
            el.addEventListener('mouseleave', () => {
                const tooltip = el.querySelector('.tooltip-text');
                tooltip.classList.add('invisible', 'opacity-0');
            });
        });
    </script>
</body>
</html>
```